<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<title>CSS实现打勾，带动画</title>
		<style type="text/css">
html,body {
	padding:0;
	margin:0;
	background-color:#667788;
	color:#efefef;
	font-family:'Open Sans';
}
.container {
	box-sizing:border-box;
	padding:25px;
	text-align:center;
}
.container h2 {
	margin-bottom:40px;
}
.container p {
	margin-top:40px;
}
@-moz-keyframes dothabottomcheck {
	0% {
	height:0;
}
100% {
	height:50px;
}
}@-webkit-keyframes dothabottomcheck {
	0% {
	height:0;
}
100% {
	height:50px;
}
}@keyframes dothabottomcheck {
	0% {
	height:0;
}
100% {
	height:50px;
}
}@keyframes dothatopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:120px;
}
}@-webkit-keyframes dothatopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:120px;
}
}@-moz-keyframes dothatopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:120px;
}
}input[type=checkbox] {
	display:none;
}
.check-box {
	height:100px;
	width:100px;
	-webkit-tap-highlight-color: transparent;
	background-color:transparent;
	border:10px solid black;
	border-radius:5px;
	position:relative;
	display:inline-block;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-moz-transition:border-color ease 0.2s;
	-o-transition:border-color ease 0.2s;
	-webkit-transition:border-color ease 0.2s;
	transition:border-color ease 0.2s;
	cursor:pointer;
}
.check-box::before,.check-box::after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:absolute;
	height:0;
	width:20px;
	background-color:#34b93d;
	display:inline-block;
	-moz-transform-origin:left top;
	-ms-transform-origin:left top;
	-o-transform-origin:left top;
	-webkit-transform-origin:left top;
	transform-origin:left top;
	border-radius:5px;
	content:' ';
	-webkit-transition:opacity ease .5;
	-moz-transition:opacity ease .5;
	transition:opacity ease .5;
}
.check-box::before {
	top:72px;
	left:41px;
	box-shadow:0 0 0 5px #667788;
	-moz-transform:rotate(-135deg);
	-ms-transform:rotate(-135deg);
	-o-transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
}
.check-box::after {
	top:37px;
	left:5px;
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
input[type=checkbox]:checked + .check-box,.check-box.checked {
	border-color:#34b93d;
}
input[type=checkbox]:checked + .check-box::after,.check-box.checked::after {
	height:50px;
	-moz-animation:dothabottomcheck 0.2s ease 0s forwards;
	-o-animation:dothabottomcheck 0.2s ease 0s forwards;
	-webkit-animation:dothabottomcheck 0.2s ease 0s forwards;
	animation:dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked + .check-box::before,.check-box.checked::before {
	height:120px;
	-moz-animation:dothatopcheck 0.4s ease 0s forwards;
	-o-animation:dothatopcheck 0.4s ease 0s forwards;
	-webkit-animation:dothatopcheck 0.4s ease 0s forwards;
	animation:dothatopcheck 0.4s ease 0s forwards;
}

		</style>
	</head>

	<body>
<div class="container">
    <input type="checkbox" id="cbtest">
    <label for="cbtest" class="check-box"></label>
</div>
	</body>

</html>